<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>DOM查询</title>
	<link rel="stylesheet" type="text/css" href="style/css.css" />
	<script type="text/javascript">
		/**
		 * @description: 为指定元素绑定单击响应函数
		 * @param {*} idStr	要绑定单击响应函数的对象的id属性值
		 * @param {*} fun	事件的回调函数，当单击时触发
		 * @return {*}
		 */
		function myClick(idStr, fun) {
			let btn = document.getElementById(idStr);
			btn.onclick = fun;
		}

		window.onload = function () {
			// 查找#bj节点
			let btn01 = document.getElementById("btn01");
			btn01.onclick = function () {
				let bj = document.getElementById("bj");
				bj.style.backgroundColor = "red";
			}
			// 查找所有li节点
			let btn02 = document.getElementById("btn02");
			btn02.onclick = function () {
				let lis = document.getElementsByTagName("li");
				for (let i = 0; i < lis.length; i++) {
					lis[i].style.backgroundColor = "skyblue";
				}
			}
			// 查找name=gender的所有节点
			let btn03 = document.getElementById("btn03");
			btn03.onclick = function () {
				let genders = document.getElementsByName("gender");
				for (let i = 0; i < genders.length; i++) {
					alert(genders[i].value);
				}
			}
			// 查找#city下所有li节点
			let btn04 = document.getElementById("btn04");
			btn04.onclick = function () {
				let city = document.getElementById("city");
				let citys = city.getElementsByTagName("li");
				for (let i = 0; i < citys.length; i++) {
					citys[i].style.border = "2px solid red";
				}
			}
			// 返回#city的所有子节点
			let btn05 = document.getElementById("btn05");
			btn05.onclick = function () {
				let city = document.getElementById("city");
				let cns = city.children;
				for (let i = 0; i < cns.length; i++) {
					cns[i].style.border = "2px solid black";
				}
			}
			// 返回#phone的第一个子节点
			let btn06 = document.getElementById("btn06");
			btn06.onclick = function () {
				let phone = document.getElementById("phone");
				let first = city.firstChild;
				console.log(phone);
				console.log(first);
			}
			// 返回#bj的父节点
			myClick("btn07", function(){
				let bj = document.getElementById("bj");
				let pn = bj.parentNode;
				console.log(pn);
				pn.style.color = "red";
			})
			// 返回#android的前一个兄弟节点
			myClick("btn08", function () {
				let android = document.getElementById("android");
				let pre = android.previousElementSibling;
				console.log(pre);
				pre.style.backgroundColor = "red";
			})
			// 返回#username的value属性值
			myClick("btn09", function () {
				let username = document.getElementById("username");
				alert(username.value);
			})
			// 设置#username的value属性值
			myClick("btn10", function () {
				let username = document.getElementById("username");
				username.value = "hello!";
				alert(username.value);
			})
			// 返回#bj的文本值
			myClick("btn11", function () {
				let bj = document.getElementById("bj");
				// alert(bj.innerHTML);
				//获取bj中的文本节点
				//因为元素节点li是文本节点的父节点
				alert(bj.firstChild.nodeValue);
			})
		}
	</script>
</head>

<body>
	<div id="total">
		<div class="inner">
			<p>
				你喜欢哪个城市?
			</p>

			<ul id="city">
				<li id="bj">北京</li>
				<li>上海</li>
				<li>东京</li>
				<li>首尔</li>
			</ul>

			<br>
			<br>

			<p>
				你喜欢哪款单机游戏?
			</p>

			<ul id="game">
				<li id="rl">红警</li>
				<li>实况</li>
				<li>极品飞车</li>
				<li>魔兽</li>
			</ul>

			<br />
			<br />

			<p>6、返回3
				你手机的操作系统是?
			</p>

			<ul id="phone">
				<li>IOS</li>
				<li id="android">Android</li>
				<li>Windows Phone</li>
			</ul>
		</div>

		<div class="inner">
			gender:
			<input class="hello" type="radio" name="gender" value="male" />
			Male
			<input class="hello" type="radio" name="gender" value="female" />
			Female
			<br>
			<br>
			name:
			<input type="text" name="name" id="username" value="abcde" />
		</div>
	</div>
	<div id="btnList">
		<div><button id="btn01">1、查找#bj节点</button></div>
		<div><button id="btn02">2、查找所有li节点</button></div>
		<div><button id="btn03">3、查找name=gender的所有节点</button></div>
		<div><button id="btn04">4、查找#city下所有li节点</button></div>
		<div><button id="btn05">5、返回#city的所有子节点</button></div>
		<div><button id="btn06">6、返回#phone的第一个子节点</button></div>
		<div><button id="btn07">7、返回#bj的父节点</button></div>
		<div><button id="btn08">8、返回#android的前一个兄弟节点</button></div>
		<div><button id="btn09">9、返回#username的value属性值</button></div>
		<div><button id="btn10">10、设置#username的value属性值</button></div>
		<div><button id="btn11">11、返回#bj的文本值</button></div>
	</div>
</body>

</html>